<template>
  <div class="box">
    <h2 @click="fanhui">&lt;</h2>
    <h4>
      {{ shop.info && shop.info.name }}
      <van-icon name="like" size="20" class="like" @click="collect" />
    </h4>

    <header>
      <input type="text" placeholder="搜索" />
      <p>点餐</p>
      <p>评价{{ shop.info && shop.info.wmPoiScore }}</p>
      <p>商家</p>
    </header>
    <main>
      <div class="left">
        <h5
          :class="{ fenlie: true, light: clickindex == index }"
          v-for="(item, index) in shop.taglist && shop.taglist"
          :key="index"
          @click="fenlie(index)"
        >
          {{ item.name }}
        </h5>
      </div>
      <div class="right">
        <p>{{ shop.taglist && shop.taglist[clickindex].name }}</p>
        <div
          class="shangpin"
          v-for="(item, index) in shop.taglist &&
          shop.taglist[clickindex].goodlist"
          :key="index"
        >
          <div class="zuo">
            <img :src="item.picture" alt="" />
          </div>
          <div class="you">
            <div class="shang">
              <p>{{ item.name }}</p>
              <p>{{ item.unit }}</p>
              <p>月售{{ item.month_saled }}</p>
            </div>
            <div class="xia">
              <p>￥{{ item.min_price }}</p>
              <button @click="add(item)">＋</button>
            </div>
          </div>
        </div>
      </div>
    </main>
    <Car></Car>
    <footer>
      <span>总价:￥{{ sum }}</span>
      <button>去结算</button>
    </footer>
  </div>
</template>

<script>
import {
  shop_shopinfo,
  shop_fav,
  shopcart_add,
  shopcart_list,
} from "../../api";
export default {
  computed: {
    // 购物车总价
    sum() {
      // var a = this.tasklist.id*this.tasklist.min_price
      // return a
      // console.log(this.tasklist);
      this.tasklist.forEach((item) => {
        this.money += item.count * item.min_price;
      });
      return this.money;
    },
  },
  data() {
    return {
      money:0,
      //保存店铺信息
      shop: [],
      clickindex: 0,
      tasklist: [],
    };
  },
  methods: {
    // 添加商品到购物车
    add(item) {
      var userid = window.localStorage.getItem("userid");
      // console.log(item.id);
      // console.log(userid);
      shopcart_add({ userid, goodid: item.id }).then((res) => {
        console.log(res.data);
      });
      // 发请求获取购物车列表
      shopcart_list({ userid: userid }).then((res) => {
        this.tasklist = res.data.list;
        console.log(this.tasklist);
      });
    },

    collect() {
      var userid = window.localStorage.getItem("userid");
      console.log(userid);
      // 发送收藏请求
      shop_fav({ userid, shopid: this.$route.params.id }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$toast.success("收藏成功");
        } else {
          this.$toast.fail("收藏失败");
        }
      });
    },
    fenlie(index) {
      this.clickindex = index;
      console.log(index);
    },
    fanhui() {
      this.$router.go(-1);
    },
  },
  mounted() {
    // 打印店铺id
    console.log(this.$route.params);
    shop_shopinfo(this.$route.params).then((res) => {
      this.shop = res.data.shopinfo;
      // console.log(this.shop);
    });
  },
};
</script>

<style scoped>
.box > h2 {
  padding-left: 10px;
  padding-top: 10px;
}
.box > h4 {
  padding: 10px;
}
.box > h4 .like {
  color: red;
}
header {
  margin: 10px 10px;
  display: flex;
  font-size: 14px;
  align-items: center;
  font-weight: 800;
}
header input {
  width: 50px;
  height: 25px;
  margin-right: 20px;
  border: 0;
  border-radius: 10px;
  background-color: rgb(236, 237, 237);
  color: black;
  text-align: center;
}
header p {
  margin-right: 20px;
}

/* main */
main {
  display: flex;
}
main .left {
  width: 25%;
  /* height: 500px; */
  /* background-color: aqua; */
}
main .left h5 {
  font-weight: 800;
  padding: 0 10px;
  margin: 20px 0;
  color: gray;
  font-size: 12px;
}
main .left .light {
  color: black;
  border-left: 5px solid red;
  padding-left: 5px;
}
/* .box .left .fenlie:nth-child(1){
    margin-top: 10px;
} */
main .right {
  display: flex;
  flex-direction: column;
  width: 75%;
  /* height: 500px; */
  /* background-color: rgb(176, 243, 218); */
}
main .right > p {
  margin-top: 10px;
  font-size: 12px;
}
main .right .shangpin {
  margin-top: 10px;
  height: 100px;
  width: 100%;
  display: flex;
  /* background-color: pink; */
}
main .right .shangpin .zuo {
  width: 100px;
  height: 100px;
}
main .right .shangpin .zuo img {
  width: 100%;
  height: 100%;
}
main .right .shangpin .you .shang p:nth-child(1) {
  font-size: 13px;
  font-weight: 800;
}
main .right .shangpin .you .shang p:nth-child(2),
main .right .shangpin .you .shang p:nth-child(3) {
  font-size: 12px;
  color: gray;
  margin-top: 5px;
}
main .right .shangpin .you {
  width: 55%;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
main .right .shangpin .you .xia {
  display: flex;
  width: 100%;
}
main .right .shangpin .you .xia p {
  font-size: 14px;
  color: red;
  font-weight: 800;
  width: 100%;
}
main .right .shangpin .you .xia button {
  text-align: center;
  border-radius: 50%;
  width: 30px;
  height: 22px;
  border: 0;
  margin-right: 10px;
  color: white;
  background-color: blueviolet;
}
footer {
  box-sizing: border-box;
  display: flex;
  position: fixed;
  bottom: 0;
  padding: 10px;
  justify-content: space-between;
  height: 50px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.522);
}
footer span {
  color: white;
}
footer button {
  width: 80px;
  border-radius: 5px;
  background-color: rgb(57, 230, 57);
  color: white;
  border: 0;
}
.car {
  position: fixed;
  width: 100%;
  bottom: 50px;
  left: 0;
}
</style>